// 首页渲染的js代码
// 1. 先显示加载层
let index = layer.load(0,{shade:[0.3,'#ccc']});

// 渲染首页函数
bindHtml()
async function bindHtml() {
  // 请求接口获取数据
  let shoesobj = await pAjax({url:'../server/scenics.php',data:{pid:2},dataType:'json'})
  // 解构获取数据
  let {data:shoesarr} = shoesobj
  // 遍历数组拼接html字符串并渲染
  let shoesStr = shoesarr.map(v=>{    
    // 获取商品的第一张图片地址
    // console.log( v )
    // console.log( v.imgpath.split('==========')[0] )
    return `
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="thumbnail">
          <img src="${v.imgpath.split('==========')[0]}" alt="...">
          <div class="caption">
              <h3>${v.name}</h3>
              <p class='introduce'>${v.introduce}</p>
              <p class="buy">
                  <a href="list.html" class="btn btn-default" role="button">立即抢购</a>
              </p>
          </div>
      </div>
    </div>  
  `;   
  }).join('');
  // 渲染到页面中
  $('.shoes').html(shoesStr);
    // 请求接口获取数据
    let dressobj = await pAjax({url:'../server/scenics.php',data:{pid:13},dataType:'json'})
    // 结构获取数据
    let {data: dressarr} =  dressobj
    // 遍历数组拼接html字符串并渲染
    let dressStr =dressarr.map(v=>`
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="thumbnail">
            <img src="${v.imgpath.split('==========')[0]}" alt="...">
            <div class="caption">
                <h3>${v.name}</h3>
                <p class='introduce'>${v.introduce}</p>
                <p class="buy">
                    <a href="list.html" class="btn btn-default" role="button">立即抢购</a>
                </p>
            </div>
        </div>
      </div>  
    `).join('');
    // 渲染到页面中
    $('.dress').html(dressStr);

    // 关闭加载层
    layer.close(index);
}


$('.num1').hover(function(){
    $('.please').css({'color':'#f10180','text-decoration': 'none'});
    $(this).css({'backgroundColor':'#fff','cursor':'pointer'}).find('.menu1').css('display','block')
    $('.menu1>p').hover(function(){
        $(this).css('color','#f10180')
    },function(){
        $(this).css('color','#666')
    })
},function(){
    $('.please').css({'color':'#666','text-decoration': 'none'});
    $(this).css('backgroundColor','#f5f5f5').find('.menu1').css('display','none')
})
$('.breadcrumb>li').hover(function(){
    $(this).find('i').addClass('glyphicon glyphicon-triangle-top').css('color','#f10180').parent().css('backgroundColor','#fff').find('.menu').css({
        'border':'1px solid #999',
        'border-top':'none',
    })
},function(){
    $(this).find('i').removeClass('glyphicon glyphicon-triangle-top')
    $(this).find('i').addClass('glyphicon glyphicon-triangle-bottom').css('color','#666').parent().css('backgroundColor','#f5f5f5')
})
// 二级菜单下拉展开,上拉收起
$('.range').parent().hover(function(){
    $(this).find('.menu-nav').stop().slideDown().css('z-index','100')
},function(){
    $(this).find('.menu-nav').stop().slideUp()
})

// 三级菜单显示隐藏
$('.menu-nav>li').hover(function(){
$(this).css('backgroundColor','#fff').find('a').first().css('color','#f00581').parent().find('.menu-menu').css({
    'display':'block',
    'z-index':'100'
})
},function(){
    $(this).css('backgroundColor','#f00581').find('a').first().css('color','#fff').parent().find('.menu-menu').css({
        'display':'none'
    })
})

